<template>
	<div>
		<bg-box>
			<pro-item :items="likeData" :showDelete="true" />
				<!-- <div class="no-data" v-if="!likeData.length">
					<img src="//img.yzcdn.cn/vant/empty-image-default.png" alt="">
					<p>收藏空空如也,去逛一下吧!</p>
				</div> -->
				<van-empty description="收藏空空如也,去逛一下吧!" v-if="!likeData.length" />
		</bg-box>
	</div>
</template>

<script>
	import bus from '@/utils/eventBus.js'
	import { findAllLike } from '@/api/user.js'
	import bgBox from '@/components/Bgbox.vue'
	import proItem from '@/components/proitem.vue'
	export default {
		data () {
			return {
				likeData: []
			}
		},
		created() {
			this.findAllLike()
			
			// 详情组件 添加与移除收藏通知
			bus.$on('update-like', () => {
				this.findAllLike()
			})
			
			// proitem 组件传递过来的通知 （删除某个收藏）
			bus.$on('remove-like', (index) => {
				console.log(index)
				this.likeData.splice(index, 1)
			})
		},
		methods: {
			// 获取我的收藏完整内容
			findAllLike () {
				const tokenString = window.sessionStorage.getItem('token')
				if (!tokenString) return this.$router.push({name:'Login'})
				findAllLike({
					tokenString
				})
				.then(({data: res}) => {
					console.log('我的收藏完整内容',res)
					if (res.code !== 2000) return this.$toast.fail('请求异常,请重新尝试!')
					this.likeData = res.result
				})
			}
		},
		components: {
			bgBox,
			proItem
		}
	}
</script>

<style lang="scss" scoped>
	.no-data{
		width: 100%;
		img{
			width: 160px;
			height: 160px;
			margin: auto;
		}
		p{
			text-align: center;
			margin-top: 16px;
			color: #969799;
			font-size: 14px;
			line-height: 20px;
		}
	}
</style>